<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <div id="app">
       总价格{{totalPrice}}
     </div>


     <script src="js/vue.js"></script>
     <script>
       const app=new Vue({
         el: '#app',
         data: {
           message:'你好vue',
           books:[
             {name:'java',price:100},
             {name:'python',price:200},
             {name:'vue',price:300},
             {name:'javascript',price:400},
           ]
         },
           //属性一般没有set 方法，一般是只读属性  推荐还是第一种写法
         computed:{
           // totalPrice:function(){
           //    return this.books.map(e=>e.price).reduce((pre,next)=>pre+next);
           // }
             totalPrice:{
                 set:function (newValue){
                    console.log(newValue);
                 },
                 get:function(){
                     return this.books.map(e=>e.price).reduce((pre,next)=>pre+next);
                 }
             }
         }
       })
     </script>
</body>
</html>